<?php
/* @var $this yii\web\View */

use yii\bootstrap\ActiveForm;

$this->title = 'VH Home';
?>

<style>
	.form-group > .form-control{
		height:50px;
	}
	
	.form-group {
	    margin-bottom: 20px;
	}
	
	.input-group{
		width:100%;
	}
	
	.c-btn{
		 cursor:auto;
		 font-size: 20px;
	}
	
	.c-error{
		border-color:red;
	}
	
</style>

<script>
	var msg_login_fail = "<?= Yii::t('app', 'Login fail') ?>";
	var msg_alphabet = "<?= Yii::t('app', 'Login only alphabet') ?>";

	function login(){
		if (!validate())
			return;
		
		var data = {
			username : $("#username").val(),
			password : $("#password").val()
		};
		
		$.ajax({
			type: "POST",
			url: app.homeUrl + "user/login",
			data: data,
			success: success,
			dataType: "json"
		});
	}	

	function success(response){
		if(response.status == "success"){
			hide_error();

            if($("#cbx_remember_username").is(':checked'))
                $.cookie('username', $("#username").val());
            else
                $.removeCookie('username');

			window.location = app.homeUrl + "home/index";
		}else
		{
            $("#msg-error").html(msg_login_fail);
			show_error();
		}
	}

	function validate(){
		if($("#username").val() == "" || $("#password").val() == ""){
            $("#msg-error").html(msg_login_fail);
			show_error();
			return false;
		}
		else if(!app.validator.isValidUsername("username") || !app.validator.isValidPassword("password")){
            $("#msg-error").html(msg_alphabet);
            show_error();
            return false;
        }
		
		return true;
	}

	function show_error(){
		$("[group='login']").addClass('c-error');
		$("#msg-error").show();
	}

	function hide_error(){
		$("[group='login']").removeClass('c-error');			
		$("#msg-error").hide();
	}

    $(function(){
        $("#username").val($.cookie('username'));
    });
</script>

<div class="site-index">
    <div class="body-content">
         <?php $form = ActiveForm::begin([
        	'id'    => 'customer-form',
    	]);
         ?>
         <div class="form-group" style="height:165px; text-align:center;">
         	<h1>Nextstage</h1>
         </div>
		   
		  <div class="form-group">
		    <div class="input-group">
		      <input type="input" class="form-control icon-lg person" id="username" placeholder="<?= Yii::t("app","Username")?>" style="height:50px;" group="login">
		    </div><!-- /input-group -->
		   </div> 
		  
		  <div class="form-group">
		    <div class="input-group">
		      <input type="password" class="form-control icon-lg lock" id="password" placeholder="<?= Yii::t("app","Password")?>" style="height:50px;" group="login">
		    </div><!-- /input-group -->
		   </div> 		 
		  
		  <div style="min-height: 60px;">
			  <div style="border:solid 3px red; text-align:center; padding:5px; font-size:17px; color:red; display:none;" id="msg-error">
			  </div>
		  </div>
		  
		  <div style="text-align: center; margin-top:30px;">
		  	<button type="button" class="btn btn-default" onclick="login();"><?= Yii::t('app', "Login") ?></button>
		  </div>
		  
		  <div class="checkbox" style="margin-top:40px;">
		    <label>
		      <input id="cbx_remember_username" type="checkbox"> <?= Yii::t('app', "Remember username") ?>
		    </label>
		  </div>
		  
		<?php ActiveForm::end(); ?>
    </div>
</div>
